<template>
  <div class="caipuli">
    <van-row>
      <div v-for="(itemF, ia) in simg" :key="`${ia}+s`">
        <van-col span="11" class="con">
          <router-link :to="`/caipuDetails/${itemF.id}`">
            <img :src="itemF.pic" class="con_img" />
            <h4 class="aaa">{{ itemF.name }}</h4>
          </router-link>
          <div class="di">
            <div>用餐人数:{{ itemF.peoplenum }}</div>
            <div
              @click="add(ia)"
              style="display: flex; justify-content: space-around"
            >
              <!-- <van-icon name="like-o" /> -->
              <!-- 模板 -->
              <van-icon
                :name="ia === iaColor ? 'like' : 'like-o'"
                :color="ia === iaColor ? 'red' : 'black'"
              />
              <span>{{ itemF.classid }}</span>
            </div>
          </div>
        </van-col>
      </div>
    </van-row>
  </div>
</template>
<script>
export default {
  props: ['simg'],
  data() {
    return {
      iaColor: '',
    };
  },
  methods: {
    //ia:下标,代表的是遍历的第几个块
    add(ia) {
      console.log(ia, 'oooooo');
      this.simg[ia].classid++;
      this.iaColor = ia;
    },
  },
};
</script>
<style scoped>
.con {
  margin: 0px 0px 5px 10px;
  overflow: hidden;
}
.redHeart {
  color: red;
}
.con .aaa {
  color: #000;
  height: 21.6px;
  overflow: hidden;
  margin: 0px;
}
.con_img {
  width: 100%;
  display: block;
  border: 2px solid skyblue;
  box-sizing: border-box;
  border-radius: 10px;
}
.left {
  font-size: 15px;
  margin: 0 2px;
}
.di {
  display: flex;
  justify-content: space-between;
  height: 20px;
  overflow: hidden;
}
</style>
